import React, {
  FC,
  ButtonHTMLAttributes,
  AnchorHTMLAttributes,
  useRef,
} from 'react';
import classNames from 'classnames';
import TouchFeedback from 'rmc-feedback';
// import Icon, { IconType } from '../Icon'
import { setCssStyle } from '../../utils/utils';

const classPrefix = 'kiana-mei-button';

/**
 * 这个Button考虑到Canvas可使用的上限个数，故改为Css实现水波纹
 */

/**
 * Button组件的3种状态
 */
type ButtonState = 'loading' | 'static' | 'disabled' | 'failed';

/**
 * Button组件的大小
 */
type ButtonSize = 'sm' | 'md' | 'lg';

/**
 * Button组件的类型
 */
type ButtonType =
  | 'primary'
  | 'default'
  | 'warning'
  | 'danger'
  | 'success'
  | 'text';

interface BaseButtonProps {
  href?: string;
  color?: ButtonType;
  size?: ButtonSize;
  className?: string;
  disabled?: boolean;
  state?: ButtonState;
  children?: React.ReactNode;
  ripple?: boolean;
  style?: React.CSSProperties;
  activeClassName?: string;
  activeStyle?: React.CSSProperties;
  rippleStyle?: React.CSSProperties;
}

type NativeButtonProps = BaseButtonProps &
  Omit<ButtonHTMLAttributes<HTMLElement>, 'type'>;
type AnchorButtonProps = BaseButtonProps &
  Omit<AnchorHTMLAttributes<HTMLElement>, 'type'>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

const PrefixBrowser = ['-webkit-', '-moz-', '-ms-', '-o-', ''];

export const Button: FC<ButtonProps> = props => {
  const {
    className,
    state,
    children,
    color,
    size,
    ripple,
    onClick,
    href,
    activeStyle,
    activeClassName,
    style,
    rippleStyle,
    ...restProps
  } = props;

  const btn = useRef<HTMLButtonElement>(null);

  let { disabled } = props;

  // //处理图标
  // let iconEle
  // if (state === 'loading') {
  // 	disabled = true
  // 	iconEle = 	<Icon type="loading" style={{marginRight: '.03rem'}}/>
  // } else if (state === 'disabled') {
  // 	disabled = true
  // } else if (state === 'failed') {
  // 	disabled = true
  // 	iconEle = <Icon type="failed" style={{marginRight: '.03rem'}}/>
  // }

  const classes = classNames(classPrefix, className, {
    [`${classPrefix}-${color}`]: color,
    [`${classPrefix}-${size}`]: size,
    // loading样式，临时放在这，等后期再次开发
    [`${classPrefix}-${state}`]: state,
    disabled: disabled,
    [`${classPrefix}-ripple`]: ripple,
  });
  var duration = 750;
  const Radius = 12.5;

  // 样式string拼凑
  var forStyle = function(position: { [propsName: string]: any }) {
    var cssStr = '';
    for (var key in position) {
      if (position.hasOwnProperty(key))
        cssStr += key + ':' + position[key] + ';';
    }
    return cssStr;
  };

  // 获取鼠标点击位置
  var forRect = function(target: any) {
    var position = {
        top: 0,
        left: 0,
        width: 0,
        height: 0,
      },
      ele = document.documentElement;
    'undefined' != typeof target.getBoundingClientRect &&
      (position = target.getBoundingClientRect());
    return {
      top: position.top + window.pageYOffset - ele.clientTop,
      left: position.left + window.pageXOffset - ele.clientLeft,
    };
  };

  const show = (event: any) => {
    let pDiv = event.target,
      cDiv = document.createElement('div');
    pDiv.appendChild(cDiv);
    let rectObj = forRect(pDiv),
      _height = event.pageY - rectObj.top,
      _left = event.pageX - rectObj.left,
      _scale = 'scale(' + (pDiv.clientWidth / 100) * 4 + ')';
    let position = {
      top: _height - Radius + 'px',
      left: _left - Radius + 'px',
      width: '25px',
      height: '25px',
      transform: '',
      background: 'rgba(255,255,255,0.3)',
    };
    if (rippleStyle) {
      position = Object.assign({}, position, rippleStyle);
    } else if (color == 'text' || color == 'default') {
      position = Object.assign({}, position, {
        background: 'rgba(50,181,233, .1)',
      });
    }
    console.log(position);
    let finishStyle = {
      opacity: 0,
      width: '25px',
      height: '25px',
      top: _height - Radius + 'px',
      left: _left - Radius + 'px',
      background: 'rgba(255,255,255,0.3)',
    };
    if (rippleStyle) {
      finishStyle = Object.assign({}, finishStyle, rippleStyle);
    } else if (color == 'text' || color == 'default') {
      finishStyle = Object.assign({}, finishStyle, {
        background: 'rgba(50,181,233, .1)',
      });
    }
    cDiv.className = cDiv.className + `${classPrefix}-ripple-animation`;
    cDiv.setAttribute('style', forStyle(position));
    setCssStyle(position, 'transform', _scale);
    setCssStyle(position, 'opacity', 1);
    setCssStyle(position, 'transition-duration', duration + 'ms');
    setCssStyle(
      position,
      'transition-timing-function',
      'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
    );
    cDiv.setAttribute('style', forStyle(position));
    setCssStyle(finishStyle, 'transition-duration', duration + 'ms');
    setCssStyle(finishStyle, 'transform', _scale);
    setTimeout(function() {
      cDiv.setAttribute('style', forStyle(finishStyle));
      setTimeout(function() {
        pDiv.removeChild(cDiv);
      }, duration);
    }, 250);
  };

  const handleClick = (e: React.MouseEvent<any>) => {
    ripple && show(e);
    onClick && onClick(e);
  };

  return (
    <>
      <TouchFeedback
        activeClassName={activeClassName || `${classPrefix}-${color}-active`}
        disabled={disabled}
        activeStyle={activeStyle}
      >
        {/* @ts-ignore */}
        <button
          ref={btn}
          style={style}
          // href={disabled ? undefined : href}
          className={classes}
          {...restProps}
          onClick={handleClick}
        >
          {/* {iconEle} */}
          {children}
        </button>
      </TouchFeedback>
    </>
  );
};

Button.defaultProps = {
  size: 'md',
  disabled: false,
  color: 'default',
};

export default Button;
